<template>
	<div>

        <el-space wrap>
      <div class="search-info-box">
            <el-text class="search-info" size="small" type="info"
              >选择月份</el-text
            >
            <el-date-picker
              v-model="state.dateTime"
              size="small"
              :shortcuts="shortcuts"
              format="YYYY-MM"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="defaultTime"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 200px; padding-left: 60px"
              :clearable="false"
            />
          </div>
			<div class="search-info-box">
				<el-text class="search-info" size="small" type="info">分销商名称</el-text>
				<el-input size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100" />
			</div>
			<div class="search-info-box">
				<el-text class="search-info" size="small" type="info">分销商账号</el-text>
				<el-input size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100" />
			</div>
			<div class="search-info-box">
				<el-text class="search-info" size="small" type="info">合作状态</el-text>
				<el-select size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100">
					<el-option label="是" :value="true"></el-option>
					<el-option label="否" :value="false"></el-option>
				</el-select>
			</div>
      <div class="search-info-box">
				<el-text class="search-info" size="small" type="info">结算状态</el-text>
				<el-select size="small" style="width: 200px" v-model.trim="state.queryParams.goodsName" clearable maxlength="100">
					<el-option label="是" :value="true"></el-option>
					<el-option label="否" :value="false"></el-option>
				</el-select>
			</div>
		</el-space>

		<div class="table">
			<el-table :data="state.dataList" border v-loading="state.loading" height="70vh" @sort-change="sortChange">
				<el-table-column fixed="left" type="index" label="序号" width="60" />
				<el-table-column fixed="left" type="index" label="月份" width="60" />
				<el-table-column prop="goodsName" label="分销商名称" width="" />
				<el-table-column prop="skuCode" label="分销商账号" show-overflow-tooltip width="" />
				<el-table-column prop="skuCode" label="邀请奖励规则" show-overflow-tooltip width="" />
				<el-table-column prop="erpStyleCode" label="合作状态" show-overflow-tooltip width="" />
				<el-table-column prop="erpStyleCode" label="累计销售金额" show-overflow-tooltip width="" />
				<el-table-column prop="costPrice" label="提成点" sortable="custom" show-overflow-tooltip width="" />
				<el-table-column prop="quantity" label="待结算佣金" sortable="custom" show-overflow-tooltip width="" />
				<el-table-column prop="orderLock" label="已结算佣金" min-width="" />
				<el-table-column prop="maxSafeQty" label="结算时间" min-width="" />
				<el-table-column prop="unUseableMessage" label="操作"  align="center" width="400">
					<template #default="{ row }">
            <div class="btn_list">
              <el-button text type="primary">结算佣金</el-button>
						<el-button text type="primary">分销明细</el-button>
						<el-button text type="primary">开启合作</el-button>
						<el-button text type="primary">操作记录</el-button>
            </div>

					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					size="small"
					v-model:current-page="state.queryParams.pageIndex"
					v-model:page-size="state.queryParams.pageSize"
					:page-sizes="[50, 100, 300]"
					background
					layout="total,sizes, prev, pager, next"
					:total="state.total"
					@size-change="onSearch"
					@current-change="getData"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive,defineOptions } from 'vue'
defineOptions({
	name:'reward'
})
const state = reactive({
	queryParams: {
		pageIndex: 1,
		pageSize: 50
	},
	total: 0,
	dataList: [{a:''}],
	loading: false
})
const sortChange = () => {}
const onSearch = () => {}
const getData = () => {}
</script>

<style scoped lang='scss'>
.btn_list{
	display: flex;
	align-items: center;
}

  :deep(.search-info-box) {
        position: relative;
        .el-select {
          width: 260px !important;
        }
        .search-info {
          margin-right: 10px;
          position: absolute;
          left: 4px;
          top: 3px;
          z-index: 9;
        }
        .el-input__inner {
          padding-left: 60px !important;
        }
        .el-select__selected-item {
          padding-left: 50px !important;
        }
      }

</style>